<script setup lang='ts'>
// 数据就是视图 视图就是数据
import { ref, reactive } from 'vue'
import axios from 'axios'
//  const account = ref("ceshi06") // 账户
//  const password = ref("123456") // 密码
const loginForm = reactive<{
    account: string
    password: string
}>({
    account: 'ceshi06',
    password: '123456'

})
const login = async () => {
    if (loginForm.account && loginForm.password) {
        //  if(account.value && password.value) {
        //    const res = await axios.post("https://meikou-api.itheima.net/login", {
        //         account: account.value,
        //         password: password.value
        //     })
        const res = await axios.post("https://meikou-api.itheima.net/login", loginForm)
        alert(JSON.stringify(res.data))


    } else {
        alert("用户名和密码不能为空")
    }
}

</script>

<template>
    <div class="container">
        <div class="login_form">
            <input placeholder="请输入用户名" v-model="loginForm.account" type="text">
            <input placeholder="请输入密码" v-model="loginForm.password" type="password">
            <button @click="login">登录</button>
        </div>

    </div>
</template>

<style scoped>
.container {
    width: "100%";
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login_form {
    width: 400px;
    height: 300px;
    background-color: pink;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.login_form input,
button {
    margin: 10px 0;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    box-sizing: border-box;

}
</style>